<!--  -->
<template>
  <div>

    <el-tabs tab-position="left" v-model="tabsName" @tab-click="handlTabs"
             v-if="conditionsInve&&conditionsInve.length > 0">
      <el-tab-pane v-for="(item) in conditionsInve[tabsIndex].conditions" :key="item.name"
                   :label="item.label" :name="item.name">
      </el-tab-pane>

      <el-checkbox-group v-model="checkListData.list"
                         :disabled="$route.query.type == 2"
                         v-if=" conditionsInve[tabsIndex].conditions.length > 0"
                         @change="(val)=>{handlGroupTabs(val)}">
        <ul class="ul" v-if="checkListData.conditionsList">
          <li v-for="(ite,idex) in checkListData.conditionsList" :key="idex">
            <el-checkbox :label="ite.place_conditions.id">
              {{ite.place_conditions.place_conditions_name}}
            </el-checkbox>
          </li>
        </ul>
      </el-checkbox-group>

    </el-tabs>
  </div>
</template>

<script>
  import { placeConditions } from '@/api/stability/giveUp'

  export default {
    props: {
      conditionsInve: {
        type: Array,
        default: function() {
          return []
        }
      },
      tabsIndex: {
        type: Number,
        default: function() {
          return 0
        }
      }
    },
    data() {
      return {
        checkListData: {
          list: [],
          index: ''
        },
        tabsName: 'aa',
        placeConditionsList: [],
        inspect_types: []
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {},
    //属性是手动定义的所需监听的值
    watch: {
      conditionsInve: {
        handler: function(newV, oldV) {
          if (!this.checkListData.name) {
            if (
              newV.length > 0 &&
              newV[0].conditions.length > 0 &&
              newV[0].conditions !== undefined
            ) {
              this.checkListData = newV[0].conditions[0]
              this.inspect_types = newV[0].inspect_types
              this.tabsName = newV[0].conditions[0].name
              this.handlPace()
            }
          } else {
            if (newV[this.tabsIndex] === undefined) return
            if (
              newV.length > 0 &&
              newV[this.tabsIndex].conditions !== undefined
            ) {
              let index = newV[this.tabsIndex].conditions.findIndex(a => a.name == this.checkListData.name)
              if (index == -1) {
                if (newV[this.tabsIndex].conditions.length) {
                  this.checkListData = newV[this.tabsIndex].conditions[0]
                  this.inspect_types = newV[this.tabsIndex].inspect_types
                  this.tabsName = newV[this.tabsIndex].conditions[0].name
                  this.handlPace()
                } else {
                  this.checkListData = { index: '', list: [] }
                }
              }
            }
          }
        },
        deep: true
      }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },
    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      ssss() {
        if (this.conditionsInve.length >= 2) {
          if (this.conditionsInve[this.tabsIndex].conditions.length > 0) {
            this.checkListData = this.conditionsInve[this.tabsIndex].conditions[0]
            this.inspect_types = this.conditionsInve[this.tabsIndex].inspect_types
            this.tabsName = this.conditionsInve[this.tabsIndex].conditions[0].name
            this.handlPace()
          }
        }
      },
      sssss() {

      },
      handlPace() {
        placeConditions(this.checkListData.name).then(res => {
          if (res.code === 200) {
            this.$set(this.checkListData, 'conditionsList', res.data)
          }
        })
      },
      //放置放置条件tab
      async handlTabs(val) {
        let conditions = this.conditionsInve[this.tabsIndex].conditions
        let inspect_types = this.conditionsInve[this.tabsIndex].inspect_types
        let index = conditions.findIndex(a => a.name == val.name)
        if (index !== -1) {
          let data = conditions[index]
          this.checkListData = data
          if (!this.checkListData.conditionsList) {
            this.handlPace()
          }
        }

        let inde = inspect_types.findIndex(a => a.inspect_type.id == val.name)
        if (inde !== -1) {
          this.inspect_types = inspect_types
        }
        this.tabsName = val.name
      },

      //放置放置条件多选
      handlGroupTabs: function(val) {
        this.checkListData.list = val
        let arr = [],
          bbb = [],
          ccc = []
        for (let i = 0; i < val.length; i++) {
          let index1 = this.checkListData.conditionsList.findIndex(
            a => a.place_conditions.id == val[i]
          )

          if (index1 !== -1) {
            arr.push({
              place_conditions: this.checkListData.conditionsList[index1]
                .place_conditions,
              sample_point: this.checkListData.conditionsList[index1].sample_point
            })
            ccc.push({
              label: this.checkListData.conditionsList[index1].place_conditions
                .place_conditions_name,
              name: val[i]
            })
          }
        }
        bbb = [...new Set(arr)]
        ccc = [...new Set(ccc)]
        this.checkListData.conditions = ccc
        let ind = this.inspect_types.findIndex(
          a => a.inspect_type.id == this.tabsName
        )
        if (ind !== -1) {
          this.inspect_types[ind].place_conditions_infos = bbb
        }

        this.$emit('sucessTab', this.tabsName)
      }
    }
  }
</script>
<style scoped>
  /* @import url(); 引入css类 */
  .ul {
    margin: 0;
    padding: 0;
  }

  .ul li {
    height: 40px;
    line-height: 40px;
  }

  .ul li:hover {
    background-color: rgb(248, 248, 248);
    cursor: pointer;
  }

  .el-card {
    height: 260px;
  }

  ::v-deep .el-tabs__item {
    width: 130px;
    text-align: center !important;
  }
</style>
